<template>
	<view class="content" :style="{'background':kbackgroundColor}" style="min-height: 100vh">
		<hx-navbar title="寄售记录" :back="true" :fixed="false" :color="knavTitleColor" barPlaceholder="hidden"
			transparent="auto"></hx-navbar>
		<view class="order_tab_list">
			<view class="order_tab" :class="{tab_on:current == item.type}" :style="current == item.type? [selStyle]:[tabNormaleStyle]"
			 v-for="item,id in tab_list" :key="id"
				@tap="on_tab_click(item)">
				{{item.name}}
			</view>
		</view>
		<view class="container">
			<view class="order_list">
				<view class="order_item" :style="{background:kcellBgColor}" v-for="item,id in list" :key="id" @tap="go_details(item)">
					
					<view class="item_info">
						<image v-if="current==0" :src="item.itemImage" mode="aspectFit" class="item_img"></image>
						<image v-if="current==1" :src="item.image" mode="aspectFit" class="item_img"></image>
						<view class="item_right">
							<view class="item_name" :style="{'color':knormalColor}">
								{{(current == 1 ? item.name:item.itmeName)}}
							</view>
							<view class="item_code" :style="{'color':knormalColor}">
								支付金额: ￥{{(current == 1 ? item.soldPrice:item.price)|fp}}
							</view>
							<view class="item_code dis" :style="{'color':knormalColor}">
								商品编号：#{{item.tokenId}}
							</view>
							<view class="item_code" :style="{'color':knormalColor}">
								<text v-if="current==0">寄售时间：{{item.saleTime | filterTime }}</text>
								<text v-if="current==1">转售时间：{{item.soldTime | filterTime }}</text>
							</view>
							<!-- <view class="item_code" v-if="item.give_status == 3">
								购买人：{{item.give_usermobile}}
							</view> -->
							<!-- <view class="item_time">
								{{item.give_time}}
							</view> -->
						</view>
						<view class="right-arrow">
							<n-icon name="right" size="24" :color="ktheme='black' ? '#ffffff':'#ABA9B4'"></n-icon>
						</view>
					</view>
				</view>
				<view class="none_box" v-if="list.length == 0">
					<image  src="@/static/without.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	
	export default {
		filters: {
			filterTime(val) {
				return uni.$u.timeFormat(parseInt(val), 'yyyy-mm-dd hh:MM:ss')
			}
		},
		data() {
			return {
				tab_list: [{
						name: '寄售中',
						type: 0
					},
					{
						name: '已转售',
						type: 1
					},
				],
				current: 0,
				page: 1,
				limit: 10,
				list: [],
				hasNextPage: true,
			}
		},
		onLoad(options) {
			this.$nextTick(() => {
				this.current = parseInt(options.status);
				this.get_data_list()
			})
		},
		onReachBottom() {
			if (this.hasNextPage) {
				let new_page = this.page + 1
				if (this.current == 0) {
					let data = {
						pageNo: this.page,
						status: 1
					}
					this.$api.saleNftRecord(data, res => {
						if (res.status) {
							this.list = this.list.concat(res.data);
							this.hasNextPage = res.data.length >= this.limit
							this.page = new_page
						}
					})
				} else {
					let data = {
						pageNo: this.page,
					}
					this.$api.soldRecord(data, res => {
						if (res.status) {
							this.list = this.list.concat(res.data);
							this.hasNextPage = res.data.length >= this.limit
							this.page = new_page
						}
					})
				}
			}
		},
		onPullDownRefresh() {
			this.get_data_list();
			uni.stopPullDownRefresh();
		},
		methods: {
			get_data_list: function() {
				this.page = 1;
				this.hasNextPage = true;
				this.list = []
				let data;
				if (this.current == 0) {
					data = {
						pageNo: this.page,
						status: 1
					}
					this.$api.saleNftRecord(data, res => {
						console.log("res-1-",res);
						if (res.status) {
							this.list = res.data;
							this.hasNextPage = res.data.length >= this.limit
						}
					})
				} else {
					data = {
						pageNo: this.page,
					}
					this.$api.soldRecord(data, res => {
						console.log("res-2-",res);
						if (res.status) {
							this.list = res.data;
							this.hasNextPage = res.data.length >= this.limit
						}
					})
				}

			},
			on_tab_click: function(item) {
				this.current = item.type;
				this.get_data_list()
			},
			go_details: function(item) {
				uni.navigateTo({
					url: '/pages/collection/collection_details?id=' + item.nftId
				});
			},
			go_pay: function(id, price, sn) {
				let source = 1
				// #ifdef APP
				source = 5
				// #endif
				// #ifdef H5
				source = 2
				// #endif
				// #ifdef MP
				source = 3
				// #endif
				let data = {
					goods_id: id,
					source: source
				}
				// this.$api.createOrder2(data, res => {
				// 	if (res.status) {
				// 		let pay_data = res.data;
				this.$common.navigateTo('/pages/payment/index?order_id=' + sn +
					'&type=7&money=' + price);
				// } else {
				// 	this.$common.errorToShow(res.msg)
				// }
				// })

			},

			cancel: function(id) {
				uni.showModal({
					content: '确定取消订单吗？',
					success: (r) => {
						if (r.confirm) {
							let data = {
								sn: id
							}
							this.$api.saleCancel(data, res => {
								if (res.status) {
									this.$common.successToShow(res.msg)
									this.get_data_list()
								} else {
									this.$common.errorToShow(res.msg)
								}
							})

						}
					}
				});
			}
		}
	}
</script>
<style lang="scss">
	.tab_bg2 {
		width: 100%;
		position: absolute;
		bottom: 0;
		height: 283rpx;
		z-index: 0;
	}

	.container {
		// padding: 0 20rpx;
	}

	.cancel_btn1 {
		color: #fff !important;
		background-color: $text-zdy !important;
	}

	.cancel_btn,
	.cancel_btn1 {
		width: 119rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: $text-zdy;
		border: 1rpx solid $text-zdy;
		border-radius: 50rpx;
		float: right;
		margin-top: 10rpx;
	}

	.order_item {
		width: 100%;
		background-color: $bg-box;
		padding: 20rpx;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		.item_info {
			padding: 10rpx 10rpx 0;
			display: flex;
			align-items: center;
			.item_img {
				width: 140rpx;
				height: 140rpx;
				border-radius: 10rpx;
				margin-right: 20rpx;
			}
			.item_right {
				flex: 1;
				.item_time {
					font-size: 20rpx;
					color: #999;
					text-align: right;

					.item-tui {
						border: solid 1rpx #6DC6F6;
						padding: 5rpx 15rpx;
						border-radius: 20rpx;
					}
				}

				.item_name {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 28rpx;
					font-weight: bold;
					color: #141519;
				}

				.item_code {
					font-size: 24rpx;
					margin-top: 8rpx;
					opacity: 0.7;
				}

				.item_code.dis {
					color: #999;
				}
			}
			
			.right-arrow {
				margin-left: auto;
			}
		}
	}

	.none_box {
		width: 534rpx;
		margin: 117rpx auto;
		font-size: 32rpx;
		color: #ABA9B4;
	}

	.none_box image {
		width: 100%;
		height: 534rpx;
		margin-bottom: 10rpx;
	}

	.order_tab_list {
		position: relative;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 180rpx;
		.order_tab {
			width: 119rpx;
			// height: 54rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			z-index: 2;
			font-size: 28rpx;
			color: var(--tabNormalColor);
		}
		.tab_on {
			color: var(--selectColorSize);
		}
		.tab_on::after {
			display: block;
			clear: both;
			content: '';
			width: 65%;
			height: 4rpx;
			background: var(--selBcakborder);
			border-radius: 100rpx;
			position: absolute;
			left: 50%;
			bottom: -12rpx;
			transform: translateX(-50%);
		}
	}
	.order_list {
		width: 100%;
		position: relative;
		padding: 0 40rpx;
	}
</style>